<template>
    <div id='myAuth'>
        <div class='close' @click='$router.back()'>
            <el-icon color='#F56C6C' size='30'>
                <CircleCloseFilled />
            </el-icon>
        </div>
        <div class='auth-container'>
            <div class='left'>
                <div class='header'>
                    身份认证
                </div>
                <div class='content'>
                    <el-form :disabled='disabled' ref='authFormRef' label-position='top' :model='form' :rules='rules'>
                        <el-form-item label='认证身份' prop='postId'>
                            <el-radio-group v-model='form.postId'>
                                <el-radio :disabled='user?.posts?.[0]==="管理员"' :label='1'>管理员</el-radio>
                                <el-radio :disabled='user?.posts?.[0]==="老师"' :label='2'>老师</el-radio>
                                <el-radio :disabled='user?.posts?.[0]==="观众"' :label='3'>观众</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label='认证原因' prop='applicationReason'>
                            <el-input
                                v-model='form.applicationReason' placeholder='请输入认证原因' maxlength='50'
                                show-word-limit type='textarea' />
                        </el-form-item>
                        <el-form-item label='认证资料'>
                            <FileUpload v-model='form.authFile' :limit='1' />
                        </el-form-item>
                        <el-form-item class='btns'>
                            <el-button v-if='form.status===0' type='warning'>审核中</el-button>
                            <div class='not-pass' v-else-if='form.status===2'>
                                <div class='reason'>
                                    <el-icon>
                                        <WarningFilled />
                                    </el-icon>
                                    {{ form.reason }}
                                </div>
                                <el-button type='danger' @click='submit'>重新提交</el-button>
                            </div>
                            <div class='pass' v-else-if='form.status===1'>
                                <div class='reason tips'>认证通过</div>
                                <el-button plain type='primary' @click='submit'>
                                    提交认证
                                </el-button>
                            </div>
                            <el-button v-else plain type='primary' @click='submit'>提交认证</el-button>
                        </el-form-item>
                    </el-form>

                </div>
            </div>
            <img class='right' src='@/assets/default/cover/login-cover.jpg' alt='login-cover' />
        </div>
    </div>
</template>
<script setup lang='ts'>
import { computed, getCurrentInstance, reactive, toRefs } from 'vue';
import useUserStore from '@/store/modules/user';
import { addAuthRecord, getAuthRecord } from '@/api/business/authRecord';

const { proxy } = getCurrentInstance();
const user = useUserStore();
const data = reactive({
    form: { applicationReason: '', postId: null, authFile: '', status: 3, reason: '' },
    rules: {
        postId: [{ required: true, message: '请选择认证身份', trigger: 'change' }],
        applicationReason: [{ required: true, message: '请输入申请原因', trigger: 'blur' }]
    }
});
const { form, rules } = toRefs(data);
/*提交身份认证资料*/
const submit = () => {
    proxy.$refs['authFormRef'].validate((valid: boolean) => {
        if (valid) {
            if (user.postIds?.includes(form.value.postId! as number)) return proxy.$modal.msgError('您不可以申请已经拥有的身份!');
            addAuthRecord(form.value).then(() => {
                proxy.$modal.msgSuccess('认证资料提交成功!');
                getAuthRecordHandler();
            });
        }
    });
};
/*重置身份认证表单*/
const reset = () => {
    form.value = { applicationReason: '', postId: null, authFile: '', status: 3, reason: '' };
};
/*获取身份认证资料*/
const getAuthRecordHandler = () => {
    getAuthRecord().then((res: any) => {
        if (res?.data){
            form.value = res.data;
        }
    });
};
getAuthRecordHandler();
const disabled = computed(() => {
    return form.value.status === 0;
});
</script>
<style scoped lang='scss'>

.not-pass, .pass {
    display: flex;
    position: relative;
    flex: 1;
    justify-content: flex-end;
    align-items: center;

    .reason {
        position: absolute;
        left: 0;
        color: #F56C6C;
        font-size: 18px;
        display: flex;
        align-items: center;

        &.tips {
            color: #67C23A;
        }
    }
}

.close {
    position: absolute;
    top: -45px;
    right: 0;
    cursor: pointer;
}

.auth-container {
    display: flex;

    :deep(.el-textarea__inner) {
        resize: none;
        min-height: 80px !important;
    }

    :deep(.el-form-item) {
        margin-bottom: 15px;
    }

    .btns {
        :deep(.el-form-item__content) {
            justify-content: flex-end;
            flex: 1;
        }

        margin-bottom: 0;
    }

    .header {
        background: rgba(64, 158, 255, 0.8);
        height: 40px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        border-top-left-radius: 6px;
    }

    .content {
        border: 1px solid rgba(64, 158, 255, 0.2);
        padding: 10px;
        min-height: 460px;
        border-bottom-left-radius: 6px;
    }

    .left {
        margin-right: 30px;
    }

    .right {
        border-bottom-right-radius: 6px;
        border-top-right-radius: 6px;
    }

    .left, .right {
        width: calc(50% - 15px);
        height: 500px;
        object-fit: cover;
    }
}
</style>
